<template>
  <view>
    <view class="cu-bar" style="background-color: #F4FAF8;">
		<view class="" style="margin-top: 100rpx;">
			<view class="action" style="margin-left: 50rpx;" @click="handleBack">
				<text class="cuIcon-back_android text-black"></text> 
				<text class=" text-gray">返回</text>
			</view>
			<view class="content text-bold" style="font-size: 35rpx; margin-top: 95rpx;">
				{{ title }}
			</view>
		</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';
// 导入watch
import { watch } from 'vue';

// 定义props
const props = defineProps<{
  /** 标题文本 */
  title: string;
  /** 是否显示 */
  show: boolean;
}>();

// 定义事件
const emit = defineEmits(['update:show']);

// 当show属性变化时触发事件
watch(() => props.show, (newValue) => {
  emit('update:show', newValue);
});

const handleBack=()=>{
	console.log('触发返回，修改show值');
	// 先设置show为false，触发退出动画
	emit('update:show', false);
	
	// 等待动画完成后再跳转
	setTimeout(()=>{
		uni.navigateBack({ delta: 1 })
	}, 300); // 与动画持续时间一致
}


</script>

<style lang="scss">

</style>